<template>
  <!-- 订单详情页 -->
  <div>
    <!-- 返回按钮 -->
    <el-button type="text" @click="goBack">返回</el-button>
    <!-- 表格数据区域 -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="订单项编号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="productId" label="产品编号" align="center">
        </el-table-column>
        <el-table-column prop="product.name" label="产品" align="center">
        </el-table-column>
        <el-table-column prop="product" label="产品图片" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- :preview-src-list预览图片数组 -->
            <el-image style="width: 50px; height: 50px" :src="scope.row.product.photo"
              :preview-src-list="[scope.row.photo]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            <span>￥</span><span
              style="color:#e65d6e;padding:0 3px;font-size: 18px;">{{scope.row.price}}</span><span>元</span>
          </template>

        </el-table-column>
        <el-table-column prop="number" label="数量" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 卡片视图区域 -->
    <div class="detailCard">
      <!-- 订单基本信息 -->
      <div class="contentBox" v-if="AllData">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单基本信息</span>
          </div>
          <div class="orderInfo">
            <div><span>订单编号：</span>{{AllData.id}}</div>
            <div><span>订单金额：￥</span><span style="color:#e65d6e;padding:0 3px;">{{AllData.total}}</span>元</div>
            <div><span>下单时间：</span>{{AllData.orderTime | fmtDate_global}}</div>
            <div><span>订单状态：</span>{{AllData.status}}</div>
          </div>
        </el-card>
      </div>
      <!-- 接单者信息 -->
      <div class="contentBox" v-if="orderEmployee">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>接单者信息</span>
          </div>
          <div class="orderEmployee">
            <div><span>接单者：</span>{{orderEmployee.realname}}</div>
            <div><span>接单者手机号：</span>{{orderEmployee.telephone}}</div>
          </div>
        </el-card>
      </div>
      <!-- 下单者信息 -->
      <div class="contentBox" v-if="orderUser">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>下单者信息</span>
          </div>
          <div class="orderUser">
            <div><span>下单者：</span>{{orderUser.realname}}</div>
            <div><span>下单者手机号：</span>{{orderUser.telephone}}</div>
          </div>
        </el-card>
      </div>
      <div class="contentBox" v-if="orderAddress">
        <!-- 雇主信息 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>雇主信息</span>
          </div>
          <div class="orderEmployee">
            <div><span>雇主：</span>{{orderAddress.username}}</div>
            <div><span>雇主手机号：</span>{{orderAddress.telephone}}</div>
            <div>
              <span>雇主地址：</span>{{orderAddress.city}}{{orderAddress.area}}{{orderAddress.address}}
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入axios
  import {
    get,
    post
  } from '@/utils/request'
  export default {
    data() {
      return {
        // 接单者信息
        orderEmployee: [],
        // 雇主信息
        orderAddress: [],
        // 订单基本信息
        orderUser: [],
        // 订单全部数据
        AllData: {},
        // 表格数据
        tableData: []
      };
    },
    computed: {},
    methods: {
      goBack() {
        this.$router.push({
          path: 'List'
        }); //返回上一层
      },
      async findDataById() {
        var id = this.$route.query.detail;
        //接收传递过来的参数
        let res = await get('/order/findById', {
          id
        });
        // 接单者信息
        this.orderEmployee = res.data.employee;
        // 雇主信息
        this.orderAddress = res.data.address;
        // 订单者信息
        this.orderUser = res.data.customer;
        // 订单全部数据
        this.AllData = res.data;
        // 表格数据源
        this.tableData = res.data.orderLines;
      }
    },
    created() {
      this.findDataById();
    },
    mounted() {},
  };

</script>
<style scoped>
  .detailCard {
    display: flex;
  }

  .box-card {
    margin: 0 10px;
  }

  .orderInfo div,
  .orderUser div,
  .orderEmployee div {
    margin: 16px 0;
  }

  .orderInfo span {
    font-size: 16px;

  }

  .detailCard {
    margin-top: 30px;
  }

  .box-card {}

</style>
